import { FC, useContext, useMemo } from "react";
import { ConfigurePageContext } from "../../ConfigurePage";
import { StyledEmptyRichText, StyledRichTextModule } from "../../ConfigurePage.styled";
import { RichTextItem } from "../../ConfigurePageType";
import { CommonModuleProps } from "../PreviewDevice";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

const RichTextModule: FC<CommonModuleProps> = ({ index }) => {
	const { content } = useContext(ConfigurePageContext);
	const text = useMemo(() => (content[index].list[0] as RichTextItem)?.text || "", [content, index]);
	return (
		<StyledRichTextModule>
			{!text ? (
				<StyledEmptyRichText className="flex justify-center items-center text-gray-500 w-full">暂无富文本~</StyledEmptyRichText>
			) : (
				<>
					<div dangerouslySetInnerHTML={{ __html: text }}></div>
				</>
			)}
		</StyledRichTextModule>
	);
};

export default RichTextModule;
